<template>
  <div class="advisory_page">
    <Menus :title="name">
      <a @click="goback"
         href="javascript:void(0)"
         v-if="show_detail">
        <div class="img_block">
          <img class="img_margin"
               src="static/img/icon_fanhui.png"
               alt="返回">
        </div>
        <span>返回</span>
      </a>
    </Menus>
    <Dialogs v-model="dialog" />
    <div class="advisory">
      <!-- block2-start -->
      <!-- <div class="items c2" :class="{only:!has_ask}" v-if="!show_detail"> -->
      <div class="items c2"
           v-if="!show_detail">
        <div class="wrap">
          <div class="hts"
               style="display:none">
            <h2>精准法律咨询</h2>
            <p>系统会自动筛选、匹配数据、最后生成一份详细的法律意见指南。指南包括了事件分析、法院预判、详细建议、可自动生成证据清单、起诉状等文书，同时提供相似案例。点击下面问题，按系统提示填写您的情况即可获得详细法律意见。</p>
          </div>
          <ol>
            <li v-for="(item, index) in advisory_list"
                :key="'key-advisory-list-'+index">
              <a :href="item.link+'&all_log='+$root.point.code+'_'+$root.point.no">{{item.title}}</a>
            </li>
          </ol>
        </div>
      </div>
      <!-- block2-end -->
      <!-- block1-start -->
      <div class="items c1"
           v-if="has_ask"
           style="display:none">
        <div class="wrap">
          <!-- start 咨询 -->
          <div class="hts"
               v-if="!show_detail">
            <h2>快速法律咨询</h2>
            <p>即问即答，直接在下面输入需要咨询的法律问题，系统将自动给出解答</p>
          </div>
          <div class="inputs"
               v-if="!show_detail">
            <textarea v-model="ask_content"
                      :placeholder="'请输入'+name+'的问题'"
                      class="form-control"
                      @keyup.enter="submitQuestion"></textarea>
            <button type="button"
                    :disabled="ask_content ? false : true"
                    @click="submitQuestion"
                    class="btn btn-warning">提交问题</button>
          </div>
          <!-- end 咨询 -->
          <!-- start 回答 -->
          <div class="answers"
               v-if="show_detail">
            <div class="hts">
              <h2>法律问题解答</h2>
            </div>
            <div class="answer">
              <div class="q">
                <img src="static/img/icon/advisory/q.png"
                     alt="">
                <strong>{{ask_content}}</strong>
              </div>
              <div class="a">
                <div class="icon"><img src="static/img/icon/advisory/robot/0.png"
                       alt="">智能机器人</div>
                <div class="content"
                     v-html="replaceFileter(my_question)"></div>
              </div>
            </div>
            <div class="rel-link">
              <div class="ht"> <img src="static/img/icon/advisory/deng.png"
                     alt=""> 获得更详细的法律意见（点击下面问题）：</div>
              <div class="links">
                <a :href="'http://yunnan.lvpin100.com'+item.link+'&all_log='+$root.point.code+'_'+$root.point.no"
                   v-for="(item, index) in advisory_list"
                   :key="'key-advisory-detail-list-'+index">{{item.title}}</a>
              </div>
            </div>
          </div>
          <!-- end 回答 -->
        </div>
      </div>
      <!-- block1-end -->

      <!-- block3-start -->
      <div class="c3"
           v-if="has_ask"
           style="display:none">
        <div class="wrap">
          <div class="ht"><img src="/static/web/theme/gov_base_terminal/img/icon/advisory/list.png"
                 alt="">法律咨询案例</div>
          <div class="list">
            <ul>
              <li class="answer"
                  v-for="(item,index) in question_list"
                  :key="'key-question-list-'+index"
                  :class="'c_'+index">
                <div class="q"
                     @click="toggle(index)">
                  <img src="/static/web/theme/gov_base_terminal/img/icon/advisory/q.png"
                       alt="">
                  <span>[{{item.category_name}}]</span>
                  <strong>{{item.content}}</strong>
                </div>
                <div class="a">
                  <div class="icon"><img src="/static/web/theme/gov_base_terminal/img/icon/advisory/robot/0.png"
                         alt="">智能机器人</div>
                  <div class="content"
                       v-html="replaceFileter(item.answer)"><br><br></div>
                </div>
              </li>
            </ul>
            <div class="more">
              <div class="loading-img"
                   v-if="!question_list.length || loadding_list"><img src="/static/web/theme/gov_base_terminal/img/icon/loadding.gif"
                     alt="">
                <div>问题正在加载中</div>
              </div>
              <a v-if="!loadding_list"
                 href="javascript:void(0)"
                 class="btn btn-default btn-lg load-more"
                 @click="loadQuestion">更多问题回答</a>
            </div>
          </div>
        </div>
      </div>
      <!-- block3-end -->
    </div>

  </div>
</template>
<script>
import Menus from '../components/Menu'
import Dialogs from '../components/Dialog'
import advisory from '../datas/advisory'
import api from '../datas/api'
export default {
  data () {
    return {
      ask_content: '',
      list: [],
      name: '',
      show_detail: false,
      advisory_list: [],
      question_list: '',
      page: 0,
      has_ask: false,
      my_question: '',
      loadding_list: false,
      project_id: -1,
      dialog: {
        show: false,
        title: '',
        cancelBtn: '返回'
      }
    }
  },

  methods: {
    replaceFileter (c) {
      const v = '回复不全面或者需要详细咨询的，点击头像进入个人首页，可查看手机号，直接电话联系或添加微信，手机号也是个人微信号。'
      return c.replace(v, '').replace(/\n/g, '<br>')
    },
    goback () {
      this.ask_content = ''
      this.my_question = ''
      this.show_detail = false
    },
    toggle (index) {
      const dom = document.querySelector(['.c3 .list .c_' + index])
      dom.classList.toggle('current')
    },
    async submitQuestion () {
      if (!this.ask_content.trim()) {
        this.dialog.show = true
        this.dialog.title = '请输入要咨询的法律问题～'
        return false
      }
      const { answer, errcode } = await this.$post(
        api.xiaoxiang.answer,
        { project_id: this.project_id, content: this.ask_content },
        this,
        '问题正在分析中'
      )
      if (!errcode) {
        this.my_question = answer
        this.show_detail = true
      } else {
        this.dialog.show = true
        this.dialog.title = answer
      }
    },
    async loadQuestion () {
      if (!this.project_id) return
      this.loadding_list = true

      const projectId = this.project_id === 4 ? 3 : this.project_id
      const query = `?page=${this.page + 1}&project_id=${projectId}`
      const { items, errcode } = await this.$get(api.xiaoxiang.list + query)

      if (errcode) {
        return false
      }
      this.question_list = [...this.question_list, ...items]
      this.page++
      this.loadding_list = false
    }
  },

  mounted () {
    const { index } = this.$route.params
    const items = advisory.lists[index]
    this.has_ask = items.hasAsk || false
    this.name = items.title
    this.advisory_list = items.sub
    this.project_id = index < 4 ? parseInt(index) + 1 : -1
    this.loadQuestion()
  },

  components: {
    Menus,
    Dialogs
  }
}
</script>
<style lang="scss" scoped>
/*
.advisory_page {
  min-height: 100vh;
  background: #fff;
}
.answer {
  background-color: #fff;
  .q {
    display: block;
    padding: 20px;
    background: #f9f9f9;
    color: #333;
    font-size: 22px;
    img {
      margin: 0 10px 0 0;
    }
    strong {
      padding-top: 2px;
      font-weight: normal;
      line-height: 1.8;
    }
  }
  .a {
    display: flex;
    padding: 40px;
    .icon {
      text-align: center;
      color: #333;
      margin-right: 30px;
      font-size: 18px;
      width: 130px;
      flex-shrink: 0;
      img {
        display: block;
        width: 129px;
        height: 129px;
        margin-bottom: 10px;
      }
    }
    .content {
      padding: 35px;
      background: #f4f9fd;
      border: 1px solid #c6dbf0;
      color: #333;
      font-size: 20px;
      line-height: 1.8;
      position: relative;
      &:after {
        display: block;
        content: '';
        width: 23px;
        height: 37px;
        position: absolute;
        left: -23px;
        top: 45px;
        background: url('/static/web/theme/gov_base_terminal/img/icon/advisory/arr.png')
          no-repeat;
      }
    }
  }
}

.advisory_page {
  padding-top: 159px;
  .advisory {
    .hts {
      text-align: center;
      margin-bottom: 35px;
      h2 {
        margin: 0;
        font-size: 36px;
        font-weight: normal;
        padding-bottom: 15px;
      }
      p {
        font-size: 18px;
        opacity: 0.75;
        padding: 0 50px;
        line-height: 1.8;
      }
    }
    .c1 {
      display: block;
      background: #56af15;
      // background: #f1c40f;
      color: #fff;
      .inputs {
        position: relative;
        textarea.form-control {
          height: 200px;
          border-radius: 4px;
          border: 0;
          // background-color: #fff;
          // box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2);
          font-size: 20px;
        }
        .btn {
          position: absolute;
          right: 20px;
          bottom: 20px;
          width: 138px;
          height: 42px;
          font-size: 20px;
        }
      }
      .answers {
        .q {
          border-bottom: 1px solid #ddd;
          strong {
            font-weight: bold;
          }
        }
      }
      .rel-link {
        padding-top: 60px;
        .ht {
          display: flex;
          font-size: 28px;
          font-weight: normal;
          align-items: center;
          margin-bottom: 40px;
        }
        .links {
          a {
            color: #fff;
            display: inline-block;
            padding: 15px 35px;
            background: rgba(255, 255, 255, 0.2);
            font-size: 20px;
            margin: 0 15px 15px 0;
            border-radius: 5px;
            &:active {
              background: rgba(255, 255, 255, 0.3);
            }
          }
        }
      }
    }
    .c2 {
      background: #fff;
      &.only {
        display: flex;
        height: 100vh;
        align-items: center;
      }
      ol {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        padding: 35px 0;
        li {
          width: 33.333%;
          a {
            display: block;
            height: 90px;
            line-height: 90px;
            color: #fff;
            border-radius: 5px;
            font-size: 24px;
            background: #4b8add;
            margin: 0 20px 40px;
            text-align: center;
            &:active {
              background: #6299e2;
            }
          }
        }
      }
    }
    .c3 {
      background: #ddd;
      .ht {
        padding: 10px 0 25px;
        font-size: 28px;
        color: #999;
        img {
          padding-right: 10px;
        }
      }
      .list {
        ul {
          list-style: none;
          padding: 0;
          li {
            .q {
              background: #fff;
              border-bottom: 1px solid #ddd;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
              span {
                padding-right: 10px;
              }
              strong {
                color: #03a9f4;
              }
            }
            .a {
              display: none;
            }

            &.current {
              border-bottom: 1px solid #ddd;
              .q {
                background: #f9f9f9;
                border-color: #fff;
                white-space: normal;
                text-overflow: clip;
                overflow: auto;
                strong {
                  color: #333;
                  font-weight: bold;
                }
              }
              .a {
                display: flex;
              }
            }
          }
        }
        .more {
          padding: 50px 0;
          text-align: center;
        }
      }
    }
    .wrap {
      padding: 120px 0;
      width: 1400px;
      margin: 0 auto;
    }
  }
}

.advisory_page {
  padding-top: 1.6rem;
  background: #fff;
  min-height: 100vh;
}

@media screen and (orientation: portrait) {
  body {
    background: red;
  }
  .list-icon ul li {
    width: 50% !important;
  }
}
@media screen and (orientation: landscape) {
  body {
    font-size: 1000px;
  }
}*/
.advisory_page {
  min-height: 100vh;
  background: #fff;
  padding-top: 1.6rem;
  .advisory {
    .hts {
      text-align: center;
      margin-bottom: 0.35rem;
      h2 {
        margin: 0;
        font-size: 0.36rem;
        font-weight: normal;
        padding-bottom: 0.15rem;
      }
      p {
        font-size: 0.18rem;
        opacity: 0.75;
        padding: 0 0.5rem;
        line-height: 1.8;
      }
    }

    .c2 {
      background: #fff;
      &.only {
        display: flex;
        height: 100vh;
        align-items: center;
      }
      ol {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        padding: 0.35rem 0;
        li {
          width: 33.333%;
          a {
            display: block;
            height: 0.9rem;
            line-height: 0.9rem;
            color: #fff;
            border-radius: 0.05rem;
            font-size: 0.24rem;
            background: #4b8add;
            margin: 0 0.2rem 0.4rem;
            text-align: center;
            &:active {
              background: #6299e2;
            }
          }
        }
      }
    }
    .wrap {
      padding: 1.2rem 0;
      width: 100%;
      margin: 0 auto;
    }
  }
}

@media screen and (orientation: portrait) {
  .advisory_page .advisory .c2 li {
    width: 50% !important;
  }
}
@media screen and (orientation: landscape) {
}
</style>
